import React, { memo, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import { headerLinks } from "../../common/local-data";
import { NavLink } from 'react-router-dom';
import { getDetailsAction } from '../../pages/home/store/actionCreators'
import './css.scss'
export default memo(function HYAppHeader() {

    // 页面代码
    const { details } = useSelector(
        (state) => ({
            details: state.getIn(["home", "details"]),
        }),
        shallowEqual
    );
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getDetailsAction());
    }, [dispatch]);
    return (
        <div className='header_wrapper'>
            <img
                className='banner_img'
                src={details.banner}
                alt='科技奖'
            />
            <div className='nav_list'>
                <div className="w list" style={{ fontSize: '20px' }}>
                    {
                        headerLinks.map((item, index) => {
                            return (
                                index === 5 ? <div key={index} className='list_item'><a href={item.link}>{item.title}</a></div> : < div key={item.title} className='list_item' >
                                    <NavLink exact={true} activeClassName='active' to={item.link}>
                                        {item.title}
                                    </NavLink>
                                </div>

                            )
                        })
                    }
                </div>
            </div>
        </div >
    )
})
